<style lang="less">
    .resources-pool-detail {
        .file-view {
            width: 300px;
            height: 300px;
            overflow: hidden;
        }

        .category-tree{
            min-height: 300px;
        }
    }
</style>
<template>
    <div>
        <ZkModalVue class="resources-pool-detail" :title="title" :size="'xl'" :visible="visible" @cancel="handleCancel">
            <a-tabs type="card" style="margin-top:-10px;" :visible="visible" defaultActiveKey="1">
                <a-tab-pane key="1" tab="资源信息">
                    <desc-list :col="1">
                        <desc-item term="资源名称" :labelCol="labelCol">{{ info.title }}</desc-item>
                        <desc-item term="资源标签" :labelCol="labelCol">{{ info.tags }}</desc-item>
                    </desc-list>
                    <desc-list :col="2">
                        <desc-item term="资源状态" :labelCol="labelCol1">{{ info.statusStr }}</desc-item>
                        <desc-item term="访问次数" :labelCol="labelCol1">{{ info.viewNum }}</desc-item>
                        <desc-item term="发布时间" :labelCol="labelCol1">{{ info.createdTimeStr }}</desc-item>
                    </desc-list>
                    <desc-list :col="1">
                        <desc-item term="资源图片" :labelCol="labelCol">
                            <a-avatar :size="150" shape="square" :src="info.picUrl" v-viewer />
                        </desc-item>
                        <desc-item term="资源描述" :labelCol="labelCol">{{ info.description }}</desc-item>
                    </desc-list>
                </a-tab-pane>
                <a-tab-pane key="2" tab="资源章节">
                    <a-row v-if="visible" :gutter="48">
                        <a-col :span="12">
                            <CategoryTree class="category-tree" :type="105" :hasOper="true" @selected="onSelected" :title="info.title" :rootKey="id"></CategoryTree>
                        </a-col>
                        <a-col :span="12" v-if="chapterInfo.hasVal">
                            <desc-list :col="1">
                                <desc-item term="资源类型" :labelCol="labelCol">{{ chapterInfo.typeName }}</desc-item>
                                <desc-item term="资源大小" :labelCol="labelCol">{{ chapterInfo.fileSizeStr }}</desc-item>
                                <desc-item term="资源内容" :labelCol="labelCol">
                                    <FileView :src="chapterInfo.fileUrl" class="file-view" v-if="chapterInfo.fileUrl"></FileView>
                                </desc-item>
                            </desc-list>
                        </a-col>
                    </a-row>
                </a-tab-pane>
            </a-tabs>
        </ZkModalVue>
    </div>
</template>
<script>
    import ZkModalVue from '@/appBase/ZkModal.vue';
    import { DescList, DescItem } from '@/appBase';
    import ZkSelect from '@/appBase/ZkSelect.vue';
    import { BaseStatusEnum } from '../common/enum/enum';
    import { queryResFileDetail } from '@/api/resourcesPool';
    import { formatTimeStr } from '@/appBase/utils';
    import FileView from '@/modules/common/components/FileView.vue';
    import CategoryTree from '@/modules/common/components/CategoryTree.vue';

    export default {
        name: "ResourcesPoolDetail",
        components: {
            ZkModalVue,
            DescList,
            DescItem,
            ZkSelect,
            FileView,
            CategoryTree
        },
        data() {
            return {
                title: '资源查看',
                pageLoading: false,
                visible: false,
                /** 布局配置 */
                labelCol: {
                    span: 4
                },
                labelCol1: {
                    span: 8
                },
                id: null,
                info: {
                    title: '',
                    tags: '',
                    description: '',
                    picUrl: '',
                    fileUrl: '',
                    fileSize: '',
                    status: BaseStatusEnum.ENABLE,
                    originalName: '',
                    typeName: '',
                    createdTime: '',
                    createdTimeStr: '',
                    fileSizeStr: ''
                },
                chapterInfo:{
                    hasVal:false,
                    typeName:null,
                    fileSize:null,
                    fileSizeStr:null,
                    fileUrl:null
                }
            }
        },
        methods: {
            /**
             * 显示
             * @param {Object} param
             * @param {String} param.id
             * @param {String} param.categoryId 分类
             */
            show(param) {
                Object.assign(this.info, this.$options.data().info);
                Object.assign(this.chapterInfo, this.$options.data().chapterInfo);
                this.id = param.id || null;
                this._onOk = param.onOk;
                this._onCancel = param.onCancel;
                this.visible = true;
                this.$nextTick(() => {
                    queryResFileDetail({ id: this.id }).then((result) => {
                        result.createdTimeStr = formatTimeStr(result.createdTime, 'YYYY-MM-DD HH:mm:ss');
                        const fileSize = parseFloat(result.fileSize) / 1024 / 1024;
                        result.fileSizeStr = `${fileSize.toFixed(4)}（MB）`;
                        result.statusStr = BaseStatusEnum.toStr(result.status);
                        result.tags = result.tags?result.tags.replace(/\|/g,' | '):'';
                        Object.assign(this.info, result);
                    });
                })
            },
            handleOk() {

                this.visible = false;
                if (this._onOk) this._onOk();
            },
            handleCancel() {
                this.visible = false;
                if (this._onCancel) this._onCancel();
            },
            onSelected(node) {
                console.log('node',node);
                if(!node)return;
                Object.assign(this.chapterInfo,node);
                if (this.chapterInfo.fileSize) {
                    const fileSize = parseFloat(this.chapterInfo.fileSize) / 1024 / 1024;
                    this.chapterInfo.fileSizeStr = `${fileSize.toFixed(4)}（MB）`;
                }else{
                    this.chapterInfo.fileSizeStr = '';
                }
                this.chapterInfo.hasVal = true;
            }
        }
    }
</script>